<template>
  <div class="role">
    <PageSearch
      :searchFormConfig="searchFormConfig"
      @handleReset="handleResetFn"
      @handleSearch="handleSearchFn"
    ></PageSearch>
    <PageTable
      ref="pageTableRef"
      :tableConfig="tableConfig"
      pageName="role"
      title="角色数据"
      @handleAddFn="handleAddFn"
      @handleEditFn="handleEditFn"
      AddDataName="新增角色"
    ></PageTable>
    <div class="dialog">
      <PageDialog
        pageName="role"
        :dialogConfig="dialogConfig"
        ref="pageDialogRef"
        :defaultInfo="defaultInfo"
        :otherInfo="otherInfo"
      >
        <div class="tree">
          <el-tree
            ref="elTreeRef"
            :data="menus"
            show-checkbox
            node-key="id"
            :props="{ children: 'children', label: 'name' }"
            @check="handleCheck"
          />
        </div>
      </PageDialog>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, nextTick, ref } from "vue";
import PageSearch from "@/components/page-search/index";
import { searchFormConfig } from "./config/roleFormConfig";
import PageTable from "@/components/page-table/index";
import { tableConfig } from "./config/roleTableConfig";
import PageDialog from "@/components/page-dialog";
import { dialogConfig } from "./config/roleDialogConfig";
import { usePageDialog } from "@/hooks/usePageDialog";
import { usePageSearch } from "@/hooks/usePageSearch";

import { mapMenuLeafKeys } from "@/utils/map-menus";
import { useStore } from "@/store";
import { ElTree } from "element-plus";
export default defineComponent({
  name: "role",
  components: {
    PageTable,
    PageSearch,
    PageDialog,
  },
  setup() {
    // eltree 的回显
    const elTreeRef = ref<InstanceType<typeof ElTree>>();
    const editCallback = (items: any) => {
      // console.log(item);
      const leafKeys = mapMenuLeafKeys(items.menuList);

      nextTick(() => {
        // console.log(elTreeRef.value);
        if (elTreeRef.value) {
          elTreeRef.value.setCheckedKeys(leafKeys, true);
        }
      });
    };

    const { pageDialogRef, defaultInfo, handleAddFn, handleEditFn } =
      usePageDialog(undefined, editCallback);

    const store = useStore();
    const menus = computed(() => store.state.menuList);

    const otherInfo = ref({});
    const handleCheck = (data1: any, data2: any) => {
      const checkedKeys = data2.checkedKeys;
      const halfCheckedKeys = data2.halfCheckedKeys;
      const menuList = { ...checkedKeys, ...halfCheckedKeys };
      
      otherInfo.value = Object.values(menuList);
    };

    const { pageTableRef, handleResetFn, handleSearchFn } = usePageSearch();

    return {
      tableConfig,
      searchFormConfig,
      dialogConfig,
      pageDialogRef,
      defaultInfo,
      handleAddFn,
      handleEditFn,
      menus,
      handleCheck,
      otherInfo,
      elTreeRef,
      pageTableRef,
      handleResetFn,
      handleSearchFn,
    };
  },
  
});
</script>

<style lang='less' scoped>
.tree {
  padding-left: 35px;
}
</style>
